<template>
	<view :style="{background:backgroundColor}" style="width: 100vw;">
		<safeTopVue v-if="safeAreaInsetTop"></safeTopVue>
		<view class="custom-navbar rowSpaceBetween" :style="navbarStyle">
			<view v-if="showLeft" class="left-section" @click="onLeftClick">
				<uv-icon :name="leftIcon" :size="iconSize"></uv-icon>
				<text v-if="leftText">{{ leftText }}</text>
			</view>
			<view class="title-section">
				<text class="title">{{ title }}</text>
			</view>
			<view :style="{opacity : showRight ? '1' :'0'}" class="right-section" @click="onRightClick">
				<text v-if="rightText">{{ rightText }}</text>
				<uv-icon v-if="!rightText" :name="rightIcon" :size="iconSize"></uv-icon>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { computed, getCurrentInstance } from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		leftText: {
			type: String,
			default: '',
		},
		leftIcon: {
			type: String,
			default: 'arrow-left',
		},
		rightText: {
			type: String,
			default: '',
		},
		rightIcon: {
			type: String,
			default: 'arrow-right',
		},
		iconSize: {
			type: Number,
			default: 20,
		},
		fixed: {
			type: Boolean,
			default: false,
		},
		safeAreaInsetTop: {
			type: Boolean,
			default: true,
		},
		showRight: {
			type: Boolean,
			default: false,
		},
		showLeft: {
			type: Boolean,
			default: true,
		},
		autoBack: {
			type: Boolean,
			default: true,
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		}
	});
	const that = getCurrentInstance();
	const onRightClick = () => {
		that.emit('rightClick')
	};

	const onLeftClick = () => {
		if (props.autoBack) {
			uni.navigateBack();
		} else {
			uni.$emit('leftClick')
		}
	};

	const navbarStyle = computed(() => ({
		position: props.fixed ? 'fixed' : 'relative',
		top: props.fixed ? '0' : 'auto',
		left: props.fixed ? '0' : 'auto',
		right: props.fixed ? '0' : 'auto',
	}));
</script>

<style scoped lang="scss">
	.custom-navbar {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		font-size: 28rpx;
	}

	.left-section,
	.right-section {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.title-section {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.title {
		font-weight: 600;
	}

	.text {
		margin-left: 10rpx;
	}
</style>